<!doctype html>
<html lang="en">
<head>
	<title>Grid - Cell and Row Formatting</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="Overview" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo.wijpager.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>

	<script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijpager.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

	<style type="text/css">
		.wijmo-wijgrid
		{
			min-height: 100px;
		}
	</style>

	<script type="text/javascript">
		$(document).ready(function () {
			$("#demo").wijgrid({
				allowPaging: true,
				pageSize: 4,

				data: new wijdatasource({
					proxy: new wijhttpproxy({
						url: "http://odata.netflix.com/Catalog/Genres('Sci-Fi & Fantasy')/Titles",
						dataType: "jsonp",
						jsonp: "$callback",
						data: {
							$format: "json",
							$inlinecount: "allpages",
							$skip: 0,
							$top: 20
						},
						key: "d"
					}),
					reader: {
						read: function (dataSource) {
							dataSource.data = dataSource.data.results;
							new wijarrayreader([{ name: "Name", mapping: "Name" },
								{ name: "ReleaseYear", mapping: "ReleaseYear" },
								{ name: "Rating", mapping: "AverageRating" },
								{ name: "Synopsis", mapping: "ShortSynopsis" },
								{ name: "Cover", mapping: function (item) { return item.BoxArt.SmallUrl; } },
								{ name: "LargeCover", mapping: function (item) { return item.BoxArt.LargeUrl; } }]
							).read(dataSource);
						}
					}
				}),

				columns: [
					{}, // Name
					{}, // ReleaseYear
					{ // Rating
						cellFormatter: function (args) {
							if (args.row.type & $.wijmo.wijgrid.rowType.data) {
								args.$container.closest("td").attr("title", args.row.data.Rating);

								var color = "#FF0000"; // red
								if (args.row.data.Rating > 3) {
									color = args.row.data.Rating < 4
										? "#FFFF00" // yellow
										: "#00FF00"; // green
								}

								$("<div />")
									.height(16)
									.width(0)
									.css("background-color", color)
									.appendTo(args.$container)
									.animate({ width: args.row.data.Rating * 20 + "%" }, 1000);

								return true;
							}
						}
					},
					{}, // Synopsis
					{// Cover
						cellFormatter: function (args) {
							if (args.row.type & $.wijmo.wijgrid.rowType.data) {
								args.$container
									.css("text-align", "center")
									.empty()
									.append($("<img />")
									.attr("src", args.row.data.Cover));

								return true;
							}
						}
					},
					{ visible: false } // LargeCover
				],

				rowStyleFormatter: function (args) {
					if ((args.state & $.wijmo.wijgrid.renderState.rendering) && (args.type & $.wijmo.wijgrid.rowType.data)) {
						args.$rows
							.css("cursor", "pointer")
							.click(function (e) {
								$("#tooltipAnchor").wijtooltip(
								{
									title: args.data.Name,
									content: "<img src=\"" + args.data.LargeCover + "\" />",
									triggers: "click",
									position: {
										my: "left top"
									}
								}).wijtooltip("showAt", { x: e.pageX, y: e.pageY });
							});
					}
				},

				dataLoading: function(args) {
					var $tooltip = $("#tooltipAnchor");
					if ($tooltip.data("wijtooltip")) {
						$tooltip.wijtooltip("hide");
					}
				}
			});
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Cell and Row Formatting</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<table id="demo">
			</table>
			<a id="tooltipAnchor"></a>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
		    This sample shows how to change the content, style and attributes of the column and row cells using jQuery.
		    The <b>cellFormatter</b> option is used to format the cells and the <b>rowStyleFormatter</b> option is used
		    to format the rows.
			</p>
		</div>
	</div>
</body>
</html>